<template>
  <div class="layout-login">

      <div class="login-content">

          <el-form :model="user" :rules="rules" ref="course" label-width="100px">

              <el-row>
                <el-col :span="18">
                  <el-form-item label="手机号码" prop="paperNum">
                    <el-input v-model="user.paperNum"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="18">
                  <el-form-item label="密码" prop="passwd">
                    <el-input type="password" v-model="user.passwd"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row style="text-align:center;margin:20px 0;">
                <el-col :span="18">
                  <el-button type="primary" @click="submitForm('ruleForm')"  :loading="loading">提交</el-button>
                  <el-button @click="resetForm('ruleForm')" style="margin-left:20px;">重置</el-button>
                </el-col>
              </el-row>

        </el-form>

      </div>

  </div>
</template>

<script>
import {login} from "@/api/api";

export default {
  name: "login",
  data(){
    return{
      user:{
        paperNum: '',
        passwd: '',
        source: '2'
      },
      rules: {
        paperNum: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        passwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
      },
      loading: false,
      redirect: ''
    }
  },
  created() {
     this.redirect = this.$route.query.redirect
  },
  methods:{
    submitForm(){
      this.$refs.course.validate((valid) => {

        if (valid) {

          const formData = new FormData();
          formData.append("paperNum", this.user.paperNum);
          formData.append("passwd", this.user.passwd);
          formData.append("source", this.user.source);

          login(formData).then(res=>{
            if(res.code == 200){
              this.$message.success("登录成功 !!! ")
              localStorage.setItem('token',res.data.token)
              if(this.redirect === undefined){
                this.$router.push({path:'/'});
              }else {
                this.$router.push({path:decodeURIComponent(this.redirect)});
              }

            }else{
              this.$message.error("登录失败 !!! ")
            }
          })
        }
      });

    },
    resetForm(){
      this.$refs.course.resetFields()
    },
  }
}
</script>

<style scoped>

*{
  margin: 0;
  padding: 0;
}

.layout-login{
  width:100%;
  height: 100%;
  position: absolute;
  background-color: #35DCB6;
}

.login-content{
    margin: 200px 0 0 600px;
    padding: 100px 0 0 100px;
    width: 600px;
    height: 300px;
    background-color: #ffffff;
    border-radius: 10px;
}
</style>